<script lang="ts" setup>
import { useQuery } from '@tanstack/vue-query'
import { userCenterGetCategoryQueryOptions } from '@/service/app/userCenter.vuequery'

defineOptions({
  name: 'HomeCategories',
})

const emit = defineEmits<Emits>()

interface Emits {
  (e: 'categoryChange', categoryName: string, isPopular: boolean): void
}

// 当前选中的分类
const selectedCategory = ref('热门')

// 获取产品类别数据
const {
  data: categoryData,
  isLoading: categoryLoading,
  error: categoryError,
} = useQuery(userCenterGetCategoryQueryOptions({}))

// 产品类别点击
function handleCategoryClick(categoryName: string) {
  selectedCategory.value = categoryName
  emit('categoryChange', categoryName, false)
}

// 热门点击
function handlePopularClick() {
  selectedCategory.value = '热门'
  emit('categoryChange', '', true)
}
</script>

<template>
  <view class="mx-5 my-5">
    <!-- 加载状态 -->
    <view v-if="categoryLoading" class="py-8 text-center text-gray-500">
      加载中...
    </view>

    <!-- 错误状态 -->
    <view v-else-if="categoryError" class="py-8 text-center text-red-500">
      加载失败，请重试
    </view>

    <!-- 数据展示 -->
    <view v-else-if="categoryData?.data?.length" class="flex items-center justify-between">
      <!-- 热门栏目 -->
      <view class="mr-2 flex-1" @click="handlePopularClick">
        <view class="relative text-center">
          <view
            class="z-10 text-2xl font-bold transition-all duration-200"
            :class="selectedCategory === '热门' ? 'text-#316CF6 scale-110' : 'text-gray-600'"
          >
            热门
          </view>
          <image
            v-if="selectedCategory === '热门'"
            src="/static/images/home/tab_bg.png"
            class="absolute left-0 top-2 h-8 w-full"
            mode="aspectFit"
          />
        </view>
      </view>

      <!-- 其他类别 -->
      <view
        v-for="(category, index) in categoryData.data.slice(0, 4)"
        :key="index"
        class="mx-1 flex-1 border border-gray-100 transition-all duration-200"
        :class="
          selectedCategory === category.categoryName
            ? 'border-#316CF6 bg-#F0F7FF'
            : 'border-gray-100'
        "
        @click="handleCategoryClick(category.categoryName)"
      >
        <view class="relative text-center">
          <view
            class="text-sm font-medium transition-all duration-200"
            :class="
              selectedCategory === category.categoryName
                ? 'text-#316CF6 scale-110'
                : 'text-gray-800'
            "
          >
            {{ category.categoryName }}
          </view>
          <image
            v-if="selectedCategory === category.categoryName"
            src="/static/images/home/tab_bg.png"
            class="absolute left-0 top-2 h-8 w-full"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="py-8 text-center text-gray-500">
      暂无产品类别
    </view>
  </view>
</template>
